<template>
	<view class="st-header-container" :style="{height: headerHeight + 'px'}">
		<view class="st-header-wrapper" :style="{height: headerHeight + 'px',background: backgroundColor}" >
			<view class="st-status-bar" :style="{height: statusBarHeight + 'px'}"></view>
			<view class="st-header-bar" :style="{height: navBarHeight + 'px'}">
				<text class="st-header-bar__back iconfont" :style="{color: iconColor}" @click="backPrevPage">
					<template v-if="isBackIcon">&#xe679;</template>
					<template v-else>&#xe677;</template>
				</text>
				<view class="st-header-bar__title" :style="{color: titleColor, textAlign:titleAlign, fontSize: titleSize + 'px'}">{{title}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * stCustomHeader 导航栏
	 * @description 自定义导航栏组件, 原生导航栏不满足功能时替换
	 * @author xuqiang 2023-11-08
	 * @property {String} title  页面标题
	 * @property {String} titleColor  标题颜色
	 * @property {String} titleSize  字体大小
	 * @property {String} iconColor  返回
	 * @property {String} backgroundColor 背景颜色
	 * @event {Function()} backPrevPage 点击事件  
	 */
	export default {
		name:"st-custom-header",
		props: {
			title: {
				type: String,
				default: '标题'
			},
			titleColor: {
				type: String,
				default: '#fff'
			},
			titleSize: {
				type: [String, Number],
				default: 16
			},
			titleAlign: {
				type: String,
				default: 'center'
			},
			iconColor: {
				type: String,
				default: '#fff'
			},
			backgroundColor: {
				type: String,
				default: 'linear-gradient(to right, #5BE181 0%, #11C586 100%)'
			}
		},
		created() {
			this.initNavData()
		},
		data() {
			return {
				isBackIcon: true, // 页面栈返回方式 true => navigateBack, false => reLaunch Home
				statusBarHeight: 0, // 状态栏高度
				navBarHeight: 0, // 导航栏高度
				headerHeight: 0, // 导航栏高度 + 状态栏高度
			};
		},
		methods: {
			
			// 初始化终端navigation信息
			initNavData(){
				const pages = getCurrentPages()
				const { menuBottom, statusBarHeight, navBarHeight } = getApp().globalData
				
				this.statusBarHeight = statusBarHeight
				this.navBarHeight = navBarHeight
				this.headerHeight = menuBottom + statusBarHeight + navBarHeight
				if(pages.length == 1) this.isBackIcon = false
			},
			
			// 判断页面栈是back还是打开首页
			backPrevPage(){
				if(this.isBackIcon){
					uni.navigateBack({
						delta: 1
					})
				}else{
					uni.reLaunch({
						url: '/pages/index/home'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.st-header-container{
	width: 100%;
	height: 44px;
	height: calc(44px + constant(safe-area-inset-top));
	height: calc(44px + env(safe-area-inset-top));
}
.st-header-wrapper{
	width: 100%;
	height: 44px;
	height: calc(44px + constant(safe-area-inset-top));
	height: calc(44px + env(safe-area-inset-top));
	position: fixed;
	top: 0;
	left: 0;
	z-index: 998;
}
.st-header-bar{
	width: 100%;
	height: 44px;
	height: calc(44px + constant(safe-area-inset-top));
	height: calc(44px + env(safe-area-inset-top));
	/* #ifdef H5 */
	padding: 14rpx 8rpx;
	/* #endif */
	/* #ifndef H5 */
	padding: 0 8rpx;
	/* #endif */
	box-sizing: border-box;
	display: flex;
	align-items: center;
	&__back{
		padding: 0 6rpx;
		font-size: 50rpx
	}
	&__title{
		flex: 1 1 auto;
		padding: 0 62rpx 0 20rpx;
		/* #ifdef H5 */
		font-size: 32rpx;
		font-weight: bold;
		/* #endif */
		/* #ifndef H5 */
		font-size: 28rpx;
		/* #endif */
	}
}
</style>